<template>


	<div class="cljk-table">
		<el-table :data="tableData" border style="width: 100%;" :height="tableH+'vh'"
			:header-row-style="{height:'30px'}" :header-cell-style="{
	        textAlign: 'center',
	        height: '30px',
	    }" size="mini">

			<el-table-column prop="vehNo" label="车牌号" width="130" fixed></el-table-column>
			<el-table-column prop="vehColor" label="车牌颜色" width="100"></el-table-column>
			<el-table-column prop="deptName" label="所属组织" width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="shiyongxingzhi" label="车辆类型" width="120"></el-table-column>
			<el-table-column prop="alarmType" label="报警信息" width="150" show-overflow-tooltip></el-table-column>
			<el-table-column prop="driverName" label="驾驶员" width="100"></el-table-column>
			<el-table-column prop="level" label="等级" width="100"></el-table-column>
			<el-table-column prop="alarmSource" label="报警来源" width="100"></el-table-column>
			<el-table-column prop="gpsTime" label="报警时间" width="150"></el-table-column>
			<el-table-column prop="speed" label="报警速度" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.speed+' km/h'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="high" label="海拔" width="100"></el-table-column>
			<el-table-column prop="mileZongduan" label="报警位置" width="150">
				<template slot-scope="scope">
					<el-button @click="getLocation(scope.row)" size="mini" type="primary">获取位置</el-button>
				</template>
			</el-table-column>



		</el-table>

		<div>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.page" :page-sizes="[20, 50, 100, 200, 300, 400]" :page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
		</div>

	</div>

</template>

<script>
	import {
		getMonitorSafeAlarmList
	} from '@/api/cljk.js';
	export default {

		name: 'zdaqTable',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 22 + 'vh';
				},
				required: true
			},
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '22vh') {
					this.tableH = 12
				} else {
					this.tableH = 74
				}
			},
		},
		data() {
			return {
				tableData: [],
				tableH: 12,
				searchParam: {
					startTime: '',
					endTime: ''
				},
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				}
			}
		},
		methods: {
			refreshList() {

				getMonitorSafeAlarmList({
					...this.searchParam,
					...this.pageInfo
				}).then(res => {
					if (res.code === 200) {
						this.pageInfo.total = res.data.total
						this.tableData = res.data.data
					}
				}).catch(err => {
					console.log(err)
				})

			}
		},
		mounted() {
			this.refreshList()
		}

	}
</script>

<style>
</style>